<template>
    <el-dialog v-model="dialogFormVisible" @close="handleClose" :close-on-click-modal="false" :title="title" width="640px">
        <el-form 
            v-loading="editLoading" 
            ref="formRef" 
            label-width="100px"
            :model="form" 
            style="padding: 30px" 
            :rules="rules"
        >
            <el-form-item label="用户昵称：" required prop="username">
                <el-input v-model="form.username" autocomplete="off" maxlength="60" placeholder="用户昵称" />
            </el-form-item>
            <el-form-item label="用户账号：" required prop="account">
                <el-input v-model="form.account" autocomplete="off" maxlength="60" placeholder="用户账号" />
            </el-form-item>
            <el-form-item label="用户密码：" required prop="password" v-if="!form.id">
                <el-input v-model="form.password" autocomplete="off" maxlength="16" placeholder="用户密码" />
            </el-form-item>
            <el-form-item label="用户手机：" prop="phone">
                <el-input v-model="form.phone" autocomplete="off" maxlength="11" placeholder="用户手机" />
            </el-form-item>
            <el-form-item label="用户邮箱：" prop="email">
                <el-input v-model="form.email" autocomplete="off" maxlength="120" placeholder="用户邮箱" />
            </el-form-item>
            <el-form-item label="用户头像：" prop="avatar">
                <el-input v-model="form.avatar" autocomplete="off" maxlength="200" placeholder="用户头像" />
            </el-form-item>
            <el-form-item label="激活状态：" required prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">已激活</el-radio>
                    <el-radio :label="0">未激活</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="dialog-footer" style="text-align: center">
                <el-button @click="handleClose" icon="remove">取消</el-button>
                <el-button type="primary" :loading="suLoading" @click="handleSubmit" icon="plus">{{ form.id?'更新':'保存' }}</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>
<script setup>
import { saveUpdate, getById } from '@/api/sysusers.js'
import KVA from '@/utils/kva.js'
import debounce from '@/utils/debounce'
const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
// 这个数据模型
let form = ref({
    username: "",
    account: "",
    password: "123456",
    avatar: "https:///qmplusimg.henrongyi.top/1572075907logo.png",
    email: "",
    phone: "",
    status: 1,
    isDeleted: 0
})

// 弹出标题
const title = ref("添加")
const editLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
// 表单验证
const rules = reactive({
    "username": [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    "account": [{ required: true, message: '请输入账号', trigger: 'blur' }],
})

// 打开修改密码的弹窗
const handleOpen = async (opid) => {
    // 每次打开头重置
    dialogFormVisible.value = true;
    if (opid) {
        title.value = "编辑"
        editLoading.value = true;
        const resp = await getById(opid)
        editLoading.value = false;
        form.value = resp.data
        title.value = "编辑【" + form.value.username + "】"
    }else{
      rules["password"] = [{ required: true, message: '请输入密码', trigger: 'blur' }]
    }
}

// 保存和修改
const handleSubmit = () => {
  suLoading.value = true
  debounce(()=>{
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        try{
          await saveUpdate(form.value)
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess(form.value.id?"更新成功":"保存成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        }catch(ex){
          suLoading.value = false
        }
      }else{
        suLoading.value = false
      }
    })
  },600)
}

const handleClose = () => {
    formRef.value.resetFields()
    form.value = {
      username: "",
      account: "",
      password: "123456",
      avatar: "https:///qmplusimg.henrongyi.top/1572075907logo.png",
      email: "",
      phone: "",
      status: 1,
      isDeleted: 0
    }
    suLoading.value = false
    editLoading.value = false
    dialogFormVisible.value = false
}


// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
    handleOpen
})
</script>